{% load static %}
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>{% block title %}首页{% endblock%} - Thor 博客</title>
        <meta name="viewport" content="width=device-width, intial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">
        <style>
        .post {
            margin-bottom: 5px;
        }
        </style>
    {% block extra_head %}
    {% endblock %}
    </head>
<body>
<div class="container head">
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">首页</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                {% for cate in navs %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'category-list' cate.id %}">{{ cate.name }}</a>
                </li>
                {% endfor %}
            </ul>
            <form class="form-inline my-2 my-lg-0" action='/search/' method="GET">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="keyword" value="{{ keyword }}">
                <button class="btn btn-outline-success" type="submit">搜索</button>
            </form>
        </div>
    </nav>
    <div class="jumbotron">
        <h1 class="display-4">Thor</h1>
        <p class="lead">基于 Django 自主研发多人博客系统</p>
    </div>

</div>
<div class="container main">
    <div class="row">
    <div class="col-xl-9 post-list">
    {% block main %}
    {% endblock %}
    </div>
    <div class="col-xl-3">
        {% block sidebar %}
            {% for sidebar in sidebars  %}
            <div class="card-body">
                <h4 class="card-title">{{ sidebar.title }}</h4>
                <p>
                    {{ sidebar.content_html }}
                </p>
            </div>
            {% endfor %}
        {% endblock %}
    </div>
</div>
<footer class="footer">
    {% block footer %}
    <div class="container">
        <hr/>
        <nav class="nav category">
            {% for cate in categories %}
            <a href="{% url 'category-list' cate.id %}" class="nav-link">{{ cate.name }}</a>
            {% endfor %}
        </nav>
    </div>
    <div class="container power">
        <span class="text-muted">Power by Thor@admin</span>
    </div>
    {% endblock %}
</footer>
</body>
</html>